<template>
  <div class="root">
    <div class="content content-center" v-if="!loading && imageList.length==0">
      <p> 没有搜索到相关图片 </p>
    </div>
    <div class="content" v-else>
      <div v-masonry transition-duration="0" item-selector=".item" origin-top="true" class="masonry-container" v-on:mousewheel="onScroll"
        @touchend="touchend">
          <div v-masonry-tile class="item" v-bind:key="index" v-for="(item, index) in imageList">
              <div class="item-box">
                  <img class="img" @load="imageLoad" :src="item.url" :preview="'1'" :preview-text="item.name">
                  <div class="title">{{item.name}} - {{index}}</div>
              </div>
          </div>
      </div>
      <div class="content-center" v-show="loading">
        努力加载中...
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
// https://www.npmjs.com/package/vue-masonry
import {VueMasonryPlugin} from 'vue-masonry'
// https://www.npmjs.com/package/vue-photo-preview
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
import serv from './ImageListService'
Vue.use(VueMasonryPlugin)
Vue.use(preview)

export default {
  name: 'ImageStore',
  data () {
    return {
      loading: false,
      imageList: [],
      pageNum: 1,
      pageSize: 20,
      page: {
        totalPages: 0
      },
      preview: false,
      categoryName: ''
    }
  },
  created () {
    let {classId, keyword, categoryName} = this.$route.query
    this.classId = classId
    this.keyword = keyword
    this.categoryName = categoryName || (keyword || '')
    this.getPage()
  },
  mounted () {
    this.$redrawVueMasonry()
  },
  methods: {
    clickItem (index) {
      this.imageUrl = this.imageList[index].originalUrl
    },
    reDraw () {
      this.$redrawVueMasonry()
    },
    onScroll (event) {
      if (event.deltaY < 0) return // 向上滚动 退出
      this.touchend()
    },
    async getPage () {
      this.loading = true
      this.page = await serv.getPage({classId: this.classId, keyword: this.keyword}, this.pageNum, this.pageSize)
      this.loading = false
      this.pageNum++
      this.imageList = this.imageList.concat(this.page.content)
      this.$previewRefresh()
    },
    onClickLeft () {
      this.$router.push({path: '/', query: {id: this.classId}})
    },
    touchend () {
      if (this.loading) return
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
      // 变量scrollHeight是滚动条的总高度
      let scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight
      if (!scrollTop) return
      if (window.innerHeight + scrollTop >= scrollHeight) {
        if (!this.page.last) {
          this.getPage()
        }
      }
    },
    imageLoad (event) {
      // console.log(event)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

.root {
  width: 100%;
}
.content {
  width: 100%;
}
.img {
  width: 100%;
}
/* 屏幕宽度小于767个象素时应用的CSS样式*/
@media (max-width: 415px) {
  .masonry-container {
    width: 100%;
    margin: 1vh auto;
  }
  .item {
    width: 50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    cursor: pointer;
    overflow: hidden;
  }
  .item-box {
    margin: 0 5px;
  }
  .popup {
    width: 100%;
  }
  .preview-img {
    max-width: 100%;
    max-height: 100%;
  }
  .title{
    font-size: 1.5em;
    flex-wrap: wrap;
    line-height:1.5em;
    background-color:white;
    margin-top: -3px;
  }
}
@media (min-width: 416px) and (max-width: 750px) {
  .masonry-container {
    width: 100%;
    margin: 1vh auto;
  }
  .item {
    width: 50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    cursor: pointer;
    overflow: hidden;
  }
  .item-box {
    margin: 0 5px;
  }
  .popup {
    width: 100%;
  }
  .preview-img {
    max-width: 100%;
    max-height: 100%;
  }
  .title{
    font-size: 0.6em;
    flex-wrap: wrap;
    line-height:1.8em;
    background-color:white;
    margin-top: -3px;
  }
}
/* 屏幕宽度在767和991象素之间的CSS样式*/
@media (min-width: 751px) and (max-width: 1200px){
  .masonry-container {
    width: 90%;
    margin: 1vh auto;
  }
  .item {
    width: 25%;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    cursor: pointer;
    overflow: hidden;
  }
  .item-box {
    margin: 0 10px;
  }
  .popup {
    width: auto;
  }
  .preview-img {
    width: 100%;
    height: 100%
  }
  .title{
    font-size: 0.6em;
    flex-wrap: wrap;
    line-height:2em;
    background-color: white;
    margin-top: -3px;
  }
}
/* 屏幕宽度在767和991象素之间的CSS样式*/
@media (min-width: 1201px){
  .masonry-container {
    width: 90%;
    margin: 1vh auto;
  }
  .item {
    width: 20%;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    cursor: pointer;
    overflow: hidden;
  }
  .item-box {
    margin: 0 10px;
  }
  .popup {
    width: auto;
  }
  .preview-img {
    width: 100%;
    height: 100%
  }
  .title{
    font-size: 0.6em;
    flex-wrap: wrap;
    line-height:2em;
    background-color: white;
    margin-top: -3px;
  }
}

</style>
